
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>问题反馈</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .issue-form {
            width: 95%;
            margin: 50px auto;
            padding: 2%;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }
        .issue-form h2 {
            text-align: center;
            margin-bottom: 30px;
        }
        .issue-form label {
            display: block;
            margin-bottom: 10px;
        }
        .issue-form input[type="text"], .issue-form textarea,.issue-form select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            box-sizing: border-box; /* Makes sure the padding does not affect the total width of the input */
            margin-bottom: 15px;
            outline-color:#64CDB0;
        }
        .issue-form input[type="submit"] {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 5px;
            background-color: #64CDB0;
            color: white;
            cursor: pointer;
        }
        .issue-form input[type="submit"]:hover {
            background-color: #15DBA4;
        }
        #issueName {
            width: 30%;
        }
        #issueMobile,#issuesid {
            width: 50%;
        }
        input[type="file"] {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
            height: auto;
        }
       #addimg{
           float: left;
           width: 80px;
           height: 80px;
          /* background-color: #ddd;*/
           border: 1px solid #ddd;
           text-align: center;
           font-size: 55px;
           line-height: 80px;
           margin-left: 10px;
           margin-bottom: 15px;
       }

        .web_notice {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.3);
            z-index: 99999;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .web_notice > div {
            width: 400px;
            background: #FFF;
            border-radius: 40px;
            padding: 10px 10px;
        }

        .web_notice h4 {
            font-weight: bold;
            text-align: center;
            font-size: 24px;
        }

        .web_notice div {
            font-size: 16px;
           /* margin-top: 26px;*/
            line-height: 15px;
            color: #999;
        }

        .web_notice a {
            display: block;
            background: #64CDB0;
            color: #FFF;
            text-align: center;
            font-weight: bold;
            font-size: 18px;
            line-height: 46px;
            margin: 0 auto;
            margin-top: 20px;
            border-radius: 32px;
            width: 55%;
        }

        @media (max-width: 768px) {
            .web_notice > div {
                width: 80%;
            }
        }
    </style>
</head>
<body>
<div class="issue-form">
    <h2>问题反馈</h2>

        <label for="issueName">称呼:</label>
        <input type="text" id="issueName" name="username" required>
        <label for="issueMobile">联系方式:</label>
        <input type="text" id="issueMobile" name="mobile" required>
        <label for="issuesid">所属软件:</label>
        <select type="text" id="issuesid" name="sid" >
        </select>
        <label for="issuesid">上传图片:<span style="color: red;font-size: 14px">(至多上传3张)</span></label>
        <div id="imgList">
        </div>
        <div style="display: none">
            <input type="file" id="toFileId" onchange="onchangeFile(this)" accept="image/*">
        </div>
        <div onclick="onclickFile()" id="addimg">
            +
        </div>
        <div style="clear: both;"></div>
        <label for="issueTitle">问题标题:</label>
        <input type="text" id="issueTitle" name="issueTitle" required>
        <label for="issueDescription">问题描述:</label>
        <textarea id="issueDescription" name="content" rows="10" required></textarea>
        <input type="submit" value="提交问题"  onclick="buttonImg()">
</div>
<div class="web_notice" style="display: none">
    <div>
        <h4>消息通知</h4>
        <div class="notice" style="text-align:center;color:#000;"></div>
        <a onclick="buttonnotice()" style="color:#ffffff;">我知道了</a>
    </div>
</div>

<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        // 公众号
        softwarelist()
    })
    function softwarelist() {
        $.ajax({
            type: "GET",
            url: "http://api.nimbleuser.lingdong365.com/index.php/api/web/softwarelist",   //后端小伙伴给的新闻列表页的接口
            dataType: "json",
            async:false,
            success:function(data){
                if(data.code == 200) {
                    var softwarelist = data.data;
                    var softwarelisthtml = '';
                    if(softwarelist.length>0){
                        for (var i = 1; i <= softwarelist.length; i++) {
                            softwarelisthtml += '<option value="'+softwarelist[i-1].id+'">'+softwarelist[i-1].name+'</option>';
                        }
                    }
                    //  var html = '';
                    //var setting = data.data.setting;
                   $("#issuesid").html(softwarelisthtml);

                }else{
                    return false;
                }
            },
            error: function (xhr, status, error){
                console.log("错误：", error);
            }
        });
    }

    var imgArr = [];//图片数组
    var imgArrType = [];//图片类型数组


    /**
     * 唤起选择文件控件
     */
    function onclickFile() {
        $('#toFileId').click();
    }


    /**
     * 选择图片后 回调文件处理
     * @param files
     */
    function onchangeFile(files) {
        //console.log(imgArr.length);
        if(imgArr.length+1 > 3){
           // alert('至多上传3张');return;
            $(".notice").html('至多上传3张!');
            $(".web_notice").show();
            return;
        }
        var file = files.files[0];
        var fileType = file.name.substring(file.name.lastIndexOf(".") + 1, file.name.length);//获取文件后缀
        var fileTypeSize = file.size;
        var fileSizeMB = fileTypeSize / 1024 / 1024;
        // 检查文件大小是否超过限制
        if (fileSizeMB > 10) {
            $(".notice").html('图片大小不能超过10MB!');
            $(".web_notice").show();
            return;
        }
        var formData = new FormData();
        formData.append('file',file);
        //console.log(file.size);
        /*var base64Img = "";
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function () {
            base64Img = reader.result; //获取到图片的base64编码
            imgArr.push(base64Img);//放入数组
            imgArrType.push(fileType);
            toImgList();//刷新数组 展示到页面
            document.getElementById('toFileId').value = "";//清掉刚选择的图片信息 不然不能连续选两张同样的文件
        };*/
        $.ajax({
            url: "http://api.nimbleuser.lingdong365.com/index.php/api/web/addimg",   //后端小伙伴给的新闻列表页的接口
            type: "post",
            data:formData,
            cache: false, //上传文件不需要缓存
            processData: false, // 告诉jQuery不要去处理发送的数据
            contentType: false, // 告诉jQuery不要去设置Content-Type请求头
            async:false,
            success:function(data){
                if(data.code == 200) {
                    imgArr.push(data.data.imgurl);//放入数组
                    imgArrType.push(fileType);
                    toImgList();//刷新数组 展示到页面
                    document.getElementById('toFileId').value = "";//清掉刚选择的图片信息 不然不能连续选两张同样的文件
                }else{
                    return false;
                }
            },
            error: function (xhr, status, error){
                console.log("错误：", error);
            }
        });
    }


    /**
     * 加载图片列表
     */
    function toImgList() {
        //删除图标
        var ico = "<svg class=\"icon\" style=\"width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"1612\" data-spm-anchor-id=\"a313x.7781069.1998910419.i3\"><path d=\"M512 0C227.84 0 0 227.84 0 512s227.84 512 512 512c284.096 0 512-227.84 512-512S796.096 0 512 0L512 0zM768 696.32 696.256 768 512 583.68 327.616 768 256 696.32 440.256 512 256 327.68 327.616 256 512 440.32 696.256 256 768 327.68 583.616 512 768 696.32 768 696.32zM768 696.32\" p-id=\"1613\"></path></svg>";

        var textHtml = "";
        for (var i = 0; i < imgArr.length; i++) {
            textHtml += " <div style='float: left;width: 80px;height: 80px; margin-left: 10px;position: relative;overflow: hidden;'> " +
                "<img  style='width: 100%; height: auto' src=" + imgArr[i] + ">" +
                "<a onclick='deleteImg(" + i + ")' style='top:5px;right:5px;display:block; position:absolute;'>" + ico + "</a>" +
                "</div>";
        }
        $("#imgList").html(textHtml);
    }


    /**
     * 根据索引删除图片
     * @param i
     */
    function deleteImg(i) {
        imgArr.splice(i, 1);
        imgArrType.splice(i, 1);
        toImgList();
    }
    /**
     * 提交表单
     * @param i
     */
    function buttonImg() {
        var username = $("#issueName").val();
        var mobile = $("#issueMobile").val();
        var sid = $("#issuesid").val();
        var imglist = imgArr;
        var title = $("#issueTitle").val();
        var description = $("#issueDescription").val();
        if(!description){
            $(".notice").html('问题描述不能为空！');
            $(".web_notice").show();
            return;
        }
        var data = {
                    username:username,
                    mobile:mobile,
                    sid:sid,
                    imglist:imglist,
                    title:title,
                    content:description
                   }
        $.ajax({
            url: "https://api.nimbleuser.lingdong365.com/index.php/api/web/wechatFeedback",   //后端小伙伴给的新闻列表页的接口
            type: "post",
            data:data,
            async:false,
            success:function(data){
                if(data.code == 200) {
                  $(".notice").html('提交成功，请勿重复操作!');
                  $(".web_notice").show();
                }else{
                    return false;
                }
            },
            error: function (xhr, status, error){
                console.log("错误：", error);
            }
        });
    }
    /**
     * 关闭提示框
     * @param i
     */
    function buttonnotice(){
        $('.web_notice').hide()
        location.reload();
    }
</script>
</body>
</html>